<template>
  <div class="billing">
    <div class="card-list inline-flex">
      <bank-card
        bankName="浦发银行"
        theme="pufa"
        number="456211224594785"
        name="张XX"
        expires="22/11"
      />
      <bank-card
        bankName="平安银行"
        theme="pingan"
        number="456211224594782"
        name="张XX"
        expires="22/11"
      />
      <bank-card
        bankName="招商银行"
        theme="zhaoshang"
        number="456211224594252"
        name="张XX"
        expires="22/11"
      />
    </div>
    <div class="channel-list inline-block">
      <a-card class="pay-channel">
        <div
          class="channel-icon shadow-lg bg-primary-500 p-md block text-text-inverse rounded-lg"
        >
          <money-collect-outlined style="font-size: 32px" />
        </div>
      </a-card>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import BankCard from './BankCard.vue';
  export default defineComponent({
    components: { BankCard },
    name: 'Billing',
    setup(props, { attrs, slots, emit }) {},
  });
</script>
<style lang="less" scoped>
  .billing {
    .card-list {
      :deep(.bank-card:not(:first-child)) {
        margin-left: calc(-320px);
        @apply shadow-md;
      }
      :deep(.bank-card) {
        transition: all 0.25s ease-in-out;
        &:hover {
          z-index: 20 !important;
          transform: scale(1.05);
        }
        &:nth-child(1) {
          z-index: 3;
        }
        &:nth-child(2) {
          z-index: 2;
        }
        &:nth-child(3) {
          z-index: 1;
        }
      }
    }
    .channel-list {
      .pay-channel {
        @apply rounded-lg inline-block mt-2;
        .channel-icon {
          @apply inline-block;
        }
      }
    }
  }
</style>
